<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/mall/flexible.js"></script>
    <script src="/js/mall/flexible_css.js"></script>
    <link rel="stylesheet" href="/css/mall/css3.css">
    <link rel="stylesheet" type="text/css" href="/css/mall/iconfont.css">
    <script src="/css/mall/iconfont.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">

    <script type="application/javascript">
        $(function () {
            //获取商品详情
            var params=getParams();
            console.log(params);
            if (params.id){
                $.get("/commodities/"+params.id,function (data) {
                    //console.log(data);
                    $(".commodity").renderValues(data);
                })
            }
            //收藏点击事件
            $(".icon-shoucang").click(function () {
                $.post("/goodsCollections/commodity",{"commodity.id":params.id},function (data) {
                    console.log(data);
                    if (data.success){
                        $(document).dialog({
                            type : 'notice',
                            infoText: '收藏成功',
                            autoClose: 500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }else{
                        $(document).dialog({
                            type : 'notice',
                            infoText: "已经收藏过了!",
                            autoClose: 500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                })
            })
            var user=JSON.parse(sessionStorage.getItem("user"));
            console.log(user);
            $("#payment").click(function () {

                if(!user) {
                    window.parent.location.href="/login.html";
                }else{
                    $.ajax({
                        url : "/buyCommodity" ,   // 处理的请求路径
                        type : "post" ,      // 此处发送的是delete请求（可变更为其他需要的请
                        data:{_method:"PUT",commodityId:params.id},
                        dataType : "json" , // 返回的数据类型为json类型
                        success : function(data) {
                            console.log(data);
                            if(data.success){

                                $.post("/transactionRecords",{"buyer.id":user.id,"commodity.id":params.id},function (data) {
                                    console.log(data);
                                    if(data.success){
                                        $(document).dialog({
                                            type : 'notice',
                                            infoText: '兑换成功',
                                            autoClose: 1000,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                        window.parent.location.href="/integrationMall.html";
                                    }
                                })
                            }else{
                                $(document).dialog({
                                    type : 'notice',
                                    infoText: data.msg,
                                    autoClose: 500,
                                    position: 'center'  // center: 居中; bottom: 底部
                                });
                            }
                        }
                    });
                };
            })
        })
    </script>
</head>
<body>
<div  class="D" >
    <!--header部分开始-->
    <header>
        <ul>
            <li>
                <a href="javascript:history.go(-1);">
                <span>返回</span>
                </a>
            </li>
            <li>基本信息</li>
            <li>详情列表</li>
            <li>参数</li>
        </ul>
    </header>
    <!--header部分结束-->
    <!--轮播开始-->
    <link rel="stylesheet" href="/css/mall/swiper.min.css">
<div class="commodity">
    <div class="lunbotu">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img render-src="picture" style="width: 100%;height: 640px;" alt="">
                </div>
              <!--  <div class="swiper-slide">
                    <img src="img2/iphone2.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img2/iphone3.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img2/iphone4.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="img2/iphone5.jpg" alt="">
                </div>-->
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <script src="/js/mall/swiper.min.js"></script>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
            autoplay:true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            }

        })
    </script>
    <!--轮播结束-->
    <!--中间部分开始-->

    <div class="center">
        <p render-html="name" style="font-size: 40px"></p>
        <p render-html="description" style="font-size: 30px;color: #5a6268"></p>
        <span render-html="price"></span><span>积分</span><br>
       <!-- <i><span render-html="commodityCatalog.title"></span></i>-->
        <div>
            <ul>
                <li>快递: 0.00</li>
                <li style="text-align: center">月销量 27777件</li>
                <li style="text-align: right">骡窝官方</li>
            </ul>
        </div>
    </div>
    </div>
    <!--中间部分结束-->
    <!--下面开始-->
    <div class="hui">
    </div>
    <!--<div class="bottom">
        <ul>
            <li><img src="img2/购物券.jpg" alt=""></li>
            <li style="margin-left: 0.5rem">全骡窝实物商品通用</li>
            <li><span style="border: solid 1px #000;width: 1rem;height: 0.5rem;float: right;border-radius: 0.12rem;text-align: center;">领取</span></li>
        </ul>
    </div>-->

    <!--下面结束-->

    <!--footer开始-->
    <div class="hui1"></div>
    <footer>
        <ul>
            <li><i class="iconfont icon-mine_icon_customer"></i><span>客服</span></li>
            <li><i class="iconfont icon-jinrudianpu"></i><span>进店</span></li>
            <li><i class="iconfont icon-shoucang"></i><span>收藏</span></li>
            <li>加入购物车</li>
            <li id="payment">立即兑换</li>
        </ul>
    </footer>
    <!--footer结束-->
</div>

</body>
</html>